<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D位移</title>
</head>
<body>
<style>
    #div1{
        width: 200px;
        height: 200px;
        background: red;
        /*2d平移  === 相对定位*/
        /*transform: translate(50px,50px);*/
        /*2d 缩放  小于1 缩写，大于1 放大*/
        /*transform: scale(1.5);*/
        margin: 0px auto;
        /*2d  倾斜   角度单位 deg*/
        /*transform: skew(45deg,10deg);*/
        /*2d 旋转  角度单位 deg*/
        transform: rotate(45deg);
    }
    #div2{
        width: 200px;
        height: 200px;
        background: blue;

    }
</style>
 <div id="div1">

 </div>
<div id="div2">

</div>
</body>
</html>